<template>
  <view>
    <view class="fullscreen-bg">
      <!-- 在这里放置你的其他内容（会覆盖在背景图上） -->

      <view class="c-wrap my" v-if="userInfo">
        <view style="margin: 25px">
			<TopNavBar title="我的账户" />
          
<!-- 余额 -->
      <view
            style="
              margin-top: 50rpx;
              background-color: rgba(33, 36, 55, 0.7);
              border-radius: 12rpx;
              padding: 20rpx 30rpx;
            ">
					<view class="available">{{userInfo.money}}</view>
					<view  class="availableTitle">当前可用余额</view>
            </view>
          <!-- 列表展示 -->
          <view
            style="
              margin-top: 50rpx; 
              background-color: rgba(33, 36, 55, 0.7);
              border-radius: 12rpx;
              padding: 20rpx 30rpx;
            ">
            <view class="recordTab" st> 
              <view
                :class="activeIndex === '充值' ? 'viewOn' : ''"
                @click="toggleColor('充值')">
                充值
              </view>
              <view
                :class="activeIndex === '提现' ? 'viewOn' : ''"
                @click="toggleColor('提现')">
                提现
              </view>
              <view
                :class="activeIndex === '转账' ? 'viewOn' : ''"
                @click="toggleColor('转账')">
                转账
              </view>
            </view>
			<!--  充值时候的展示-->
			<view v-if="activeIndex=='充值'" >
				<view class="inputTop">
								<view class="inputTop_left">
									<text style="font-size: 28rpx;color: rgba(255, 255, 255,0.5);">从</text>
									<text style="font-size: 28rpx;">{{czType}}</text>
								</view>
							</view>
							<!-- ATM -->
							<view style="margin-bottom: 48rpx;display: flex;background-color: rgba(33, 36, 55,0.7);width: 100%;height: 116rpx">
							<view class="inputTitle" style="display: flex;justify-content: space-between;;align-items: center;;box-sizing: border-box;padding: 0 20rpx;">  <text> {{czType}}</text>
				             <u-icon name="arrow-down" color="white" size="20"></u-icon>
								 </view>
								 <u--input
									  v-model="money"
									  placeholder="请输入内容"
									  border="surround"
									>
									</u--input>
									</view>
				<!-- 金豆 -->
						<view class="inputTop">
								<view class="inputTop_left">
									<text style="font-size: 28rpx;color: rgba(255, 255, 255,0.5);">兑换</text>
									<text style="font-size: 28rpx;">金豆</text>
								</view>
								<view class="inputTop_right">
									<text style="font-size: 28rpx;">充值手续费1%</text>
								</view>
							</view>
				<view style="display: flex;background-color: rgba(33, 36, 55,0.7);width: 100%;height: 116rpx"> 
				<view class="inputTitle"> 金豆</view>
					<text style="height: 116rpx;line-height: 116rpx;margin-left: 25rpx;">
						{{((money?parseFloat(money):0)*config.buy_price*config.buy_gold).toFixed(0)}}
					</text>
					</view>
					<u-button @click="getAddress"  class="custom-style" color="linear-gradient(to right, rgb(27, 88, 249),rgb(89, 133, 248))">充值</u-button>
				     
			</view>
	
		<!--  提现时候的展示-->
			<view v-if="activeIndex=='提现'" >
			
				<!-- 提现钻石 -->
					
				<view style="display: flex;background-color: rgba(33, 36, 55,0.7);width: 100%;height: 116rpx;margin: 80rpx 0;"> 
					<view class="inputTitle"> 提现金豆</view>
						<u--input
						  v-model="money"
						  placeholder="请输入提现金豆"
						  border="surround">
						</u--input>
				</view>
				<!-- 钱包地址 -->
						
						
				<view style="display: flex;background-color: rgba(33, 36, 55,0.7);width: 100%;height: 116rpx;margin-bottom: 80rpx;"> 
					<view class="inputTitle"> 钱包地址</view>
						<u--input disabled
						  v-model="userInfo.username"
						  placeholder="请输入提现钱包地址"
						  border="surround">
						</u--input>
				</view>
					<u-button  @click="doSubmit" class="custom-style" text="" color="linear-gradient(to right, rgb(27, 88, 249),rgb(89, 133, 248))">申请提现</u-button>
				     
			</view>
		
		<!--  转账时候的展示-->
			<view v-if="activeIndex=='转账'" >
			
				<!-- 提现钻石 -->
					
				<view style="display: flex;background-color: rgba(33, 36, 55,0.7);width: 100%;height: 116rpx;margin: 80rpx 0;"> 
					<view class="inputTitle"> 提现金豆</view>
						<u--input
						  v-model="money"
						  placeholder="请输入提现金豆"
						  border="surround">
						</u--input>
				</view>
				<!-- 钱包地址 -->
						
						
				<view style="display: flex;background-color: rgba(33, 36, 55,0.7);width: 100%;height: 116rpx;margin-bottom: 80rpx;"> 
					<view class="inputTitle"> 转账钱包</view>
						<u--input
						  v-model="userInfo.username" disabled
						  placeholder="请输入提现钱包地址"
						  border="surround">
						</u--input>
				</view>
				
				<!-- 钱包地址 -->
						
						
				<view style="display: flex;background-color: rgba(33, 36, 55,0.7);width: 100%;height: 116rpx;margin-bottom: 80rpx;"> 
					<view class="inputTitle"> 收款钱包</view>
						<u--input
						  v-model="toAddress"
						  placeholder="请输入收款钱包地址"
						  border="surround">
						</u--input>
				</view>
					<u-button  @click="doTrans" class="custom-style" text="" color="linear-gradient(to right, rgb(27, 88, 249),rgb(89, 133, 248))">确认转款</u-button>
				     
			</view>
		
		</view>
		
        </view>
		
		
      </view>

      <!-- 底层tabber -->
      <view class="footer-area">
      		<view v-for="(item, index) in listDate" :key="index" class="tab-item"
      			:class="{ 'active': currentIndex === index+1 }" @click="btnTab(item.pagePath, index)">
      		 <button v-if="index==2"  id="payButton" class="btnPostion flex items-center justify-center gap-2 px-5 py-3 rounded-lg btn-gradient text-white font-bold text-base transition-transform duration-200">
      		        <i class="fa-brands fa-bitcoin"></i>
      		        <span>Pay</span>
      		    </button>
      			<div v-if="index==2" class="bg-dark text-light min-h-screen flex items-center justify-center">
      			    <button id="payButton" class="flex items-center justify-center gap-2 px-5 py-3 rounded-lg btn-gradient text-white font-bold text-base transition-transform duration-200">
      			        <i class="fa-brands fa-bitcoin"></i>
      			        <span>Pay</span>
      			    </button>
      				</div>
      			<image v-else :src="currentIndex === index+1 ? item.selectedIconPath : item.iconPath" class="tab-icon" />
      		</view>
      	</view>
    </view>
  </view>
</template>

<script>
	import TopNavBar from '@/components/TopNavBar.vue'
export default {
	 components: {
	    TopNavBar
	  },
  data() {
    return {
			config: null,
			
		money:'',
			toAddress:'',
		czType:'USDT',

		      // 输入框自定义样式（通过 u-input 的 customStyle 属性）
		   
      activeIndex: "充值",
      isBacking: false,
      userInfo: null,
      invitationList: [
        {
          name: "西门炊事班长",
          id: "654321",
          type: "审核中",
          time: "2025-04-29 08:15:32",
        },
        {
          name: "反骨海绵宝宝",
          id: "654321",
          type: "审核中",
          time: "2025-04-29 08:15:32",
        },
        {
          name: "盐焗黑洞",
          id: "654321",
          type: "审核中",
          time: "2025-04-29 08:15:32",
        },
        {
          name: "摆烂锦鲤",
          id: "654321",
          type: "已通过",
          time: "2025-04-29 08:15:32",
        },
        {
          name: "蟹堡王",
          id: "654321",
          type: "已通过",
          time: "2025-04-29 08:15:32",
        },
        {
          name: "像素蘑菇",
          id: "654321",
          type: "已通过",
          time: "2025-04-29 08:15:32",
        },
        {
          name: "半糖雾‌",
          id: "654321",
          type: "已通过",
          time: "2025-04-29 08:15:32",
        },
        {
          name: "鲸落",
          id: "654321",
          type: "已通过",
          time: "2025-04-29 08:15:32",
        },
        {
          name: "量子摸鱼人",
          id: "654321",
          type: "已通过",
          time: "2025-04-29 08:15:32",
        },
      ],
      currentIndex: 4,
      listDate: [
        {
          pagePath: "/pages/home/home",
          iconPath: "/static/home/home.png",
          selectedIconPath: "/static/home/homeActive.png",
        },
        {
          pagePath: "/pages/family/family",
          iconPath: "/static/home/family.png",
          selectedIconPath: "/static/home/familyActive.png",
        },
        {pagePath: '/pages/my/myAccount?activeIndex=充值',
          iconPath: "/static/home/add.png",
          selectedIconPath: "/static/home/add.png",
        },
        {
          pagePath: "/pages/ranking/ranking",
          iconPath: "/static/home/ranking.png",
          selectedIconPath: "/static/home/rankingActive.png",
        },
        {
          pagePath: "/pages/my/my",
          iconPath: "/static/home/my.png",
          selectedIconPath: "/static/home/myActive.png",
        },
      ],
    };
  },

  async onLoad(options) {
	  this.activeIndex=options.activeIndex
    await uni.$ice.checkLogin();
	this.web3 = new Web3(window.ethereum);
	this.getConfig()
    this.getUserInfo();
  },
  onBackPress() {
    // 监听安卓物理返回键
    // this.handleBack();
    // return true; // 阻止默认返回行为
  },
  methods: {
	  getAddress() {
	  		if (this.money <= 0) {
	  			uni.showToast({
	  				title: this.$t('金额错误'),
	  				icon: "none"
	  			})
	  			return
	  		}
	  		this.transferToken()
	  	},
	  	async transferToken() {
	  		uni.showLoading({
	  			title:'Loading...',
	  		})
	  		try {
	  			let address = await uni.$ice.getAddress();
	  			console.log(address)
	  			if (this.userInfo.username != address) {
	  				uni.removeStorageSync("token")
	  				await uni.$ice.checkLogin()
	  				this.getUserInfo()
	  				uni.hideLoading()
	  				return;
	  			}
	  			// 创建代币合约实例
	  			const contract = new this.web3.eth.Contract(
	  				[{
	  					constant: false,
	  					inputs: [{
	  							name: '_to',
	  							type: 'address'
	  						},
	  						{
	  							name: '_value',
	  							type: 'uint256'
	  						}
	  					],
	  					name: 'transfer',
	  					outputs: [{
	  						name: '',
	  						type: 'bool'
	  					}],
	  					type: 'function'
	  				}],
	  				this.config.contact_address
	  			);
	  			//4629491002
	  			// 发送交易
	  			const txHash = await contract.methods
	  				.transfer(this.config.recharge_address, this.web3.utils.toWei(this.money, this.config.decimal))
	  				.send({
	  					from: this.userInfo.username
	  				});
	  			console.log('txHash', txHash)
	  			uni.hideLoading()
	  			uni.showModal({
	  				title: this.$t('提示'),
	  				content: this.$t('充值成功，请耐心等待'),
	  				showCancel: false
	  			})
	  		} catch (e) {
	  			uni.hideLoading()
	  			console.log('转账失败:', e);
	  			uni.showModal({
	  				title: this.$t('提示'),
	  				content: this.$t('转账失败,'+(e.error.message||'')),
	  				showCancel: false
	  			})
	  		}
	  	},
	  
	  getConfig() {
	  	uni.$ice.post('index/config', {}, false).then(res => {
	  		this.config = res.data
	  		this.money = this.config.recharge_arr_2[0].coin;
	  	}).catch(err => {
	  
	  	})
	  },
	  chooseMoney(money, idx) {
	  	this.nowIdx = idx;
	  	this.money = money;
	  },
	  doTrans(){
	  	uni.$ice.post('wallet/trans', {to_address:this.toAddress,money:this.money}, true).then(res => {
	  		this.getUserInfo()
	  		uni.showToast({
	  			title:this.$t(res.msg),
	  			icon:'none'
	  		})
	  		uni.stopPullDownRefresh()
	  				
	  	}).catch(err => {
	  				
	  	})
	  },
	  
	  doSubmit(){
	  		uni.$ice.post('wallet/withdraw', {money:this.money}, true).then(res => {
	  			this.getUserInfo()
	  			uni.showToast({
	  				title:this.$t(res.msg),
	  				icon:'none'
	  			})
	  			uni.stopPullDownRefresh()
	  					
	  		}).catch(err => {
	  					
	  		})
	  	},
	  
	   handleSelectChange(value) {
	        console.log('选中值:', value)
	      },
    toggleColor(type) {
		this.money=''
			this.toAddress=''
      this.activeIndex = this.activeIndex === type ? -1 : type;
	
    },
    btnTab(path, index) {
      this.currentIndex = index;
      uni.navigateTo({
        url: path,
      });
    },
    handleBack() {
      console.log(111);
      if (this.isBacking) return;
      this.isBacking = true;
      console.log(222);
      const pages = getCurrentPages();
      if (pages.length > 1) {
        uni.navigateBack({ delta: 1 });
      } else {
        uni.switchTab({ url: "/pages/home/home" });
      }

      // 防止快速多次点击
      setTimeout(() => {
        this.isBacking = false;
      }, 1000);
    },

    getUserInfo() {
      let tmp = uni.getStorageSync("userInfo");
      if (tmp) {
        this.userInfo = JSON.parse(tmp);
		return 
      }
      uni.$ice
        .post("user/index", {}, false)
        .then((res) => {
          uni.setStorageSync("userInfo", JSON.stringify(res.data));
          this.userInfo = res.data;
          if (this.userInfo.username != uni.$ice.walletAddress) {
            uni.removeStorageSync("token");
            location.reload();
          }
          uni.stopPullDownRefresh();
        })
        .catch((err) => {});
    },
  },
};
</script>

<style scoped>
/* 若在scoped样式中，使用深度选择器 */
::v-deep .u-cell__title-text {
  font-size: 20px !important;
}
.tab-item:nth-child(3) .tab-icon {
  /* 选中第三个 Tab（中间的 add 图标） */
  width: 80px !important;
  /* 放大宽度 */
  height: 80px !important;
  /* 放大高度 */
  position: relative;
  top: -84rpx;
}

.footer-area {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 62px;
  /* line-height: 86px; */
  padding-top: 26px;
  display: flex;
  background-color: #212437;
  color: red;
  justify-content: space-around;
  padding-left: 16px;
  padding-right: 16px
}

.fullscreen-bg {
  position: fixed;
  /* 关键：固定定位 */
  top: 0;
  left: 0;
  width: 100vw;
  /* 100%视窗宽度 */
  height: 100vh;
  /* 100%视窗高度 */
  background-image: url('@/static/banner.png');
  /* 替换为你的图片路径 */
  background-size: cover;
  /* 图片拉伸填满容器 */
  background-position: center;
  /* 图片居中 */
  background-repeat: no-repeat;
  /* 禁止重复 */
}

.title {
  color: white;
  font-size: 24px;
  position: relative;
  /* 需要设置定位（relative/absolute） */
  z-index: 1;
  /* 确保文字在背景图上方 */
}

.tab-icon {
  width: 30px;
		height: 30px;
}

page {
  background-color: transparent;
}

/* .my .setting .setting-list .left img {
		margin-right: 20rpx
	} */

.my .setting .setting-list .right {
  color: #fff;
}
.my_zz {
  color: rgb(255, 75, 75);
  font-family: 阿里巴巴普惠体 2;
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: 0px;
}
.YE {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 33%;
}
.ye_num {
  color: rgb(255, 255, 255);
  font-family: 阿里巴巴普惠体 2;
  font-size: 36px;
  font-weight: 700;
  line-height: 50px;
  letter-spacing: -0.3px;
  text-align: left;
}
.ye_title {
  color: rgba(255, 255, 255, 0.6);
  font-family: 阿里巴巴普惠体 2;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: -0.3px;
  text-align: left;
}
.my_type {
  height: 30px;
  padding: 0 8px;
  border-radius: 3px;
  box-shadow: 0px 0px 50px 0px rgba(27, 88, 249, 0.5);
  background: linear-gradient(
    180deg,
    rgb(27, 88, 249) 19.847%,
    rgb(89, 133, 248) 82.443%
  );
  color: rgb(255, 255, 255);
  font-family: 阿里巴巴普惠体 2;
  font-size: 14px;
  font-weight: 400;
  line-height: 30px;
  letter-spacing: -0.3px;
  text-align: left;
}

.recordTab {
  border-radius: 50px;
  background: rgba(33, 36, 55, 0.7);
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 70%;
  margin: 0 auto;
  height: 30px;
  margin-bottom: 25rpx;
}
.recordTab view {
  width: 33%;
  border-radius: 50px;
  text-align: center;
  background: rgba(33, 36, 55, 1);
  font-family: 阿里巴巴普惠体 2;
  font-size: 14px;
  font-weight: 400;
  height: 30px;
  line-height: 30px;
}
.recordTab .viewOn {
  border-radius: 50px;
  background: linear-gradient(
    180deg,
    rgb(27, 88, 249) 19.847%,
    rgb(89, 133, 248) 82.443%
  );
}
.available{
	color: rgb(255, 255, 255);
	font-size: 72rpx;
	font-weight: 700;
	line-height: 50px;
	letter-spacing: 0px;
	text-align: center;
	margin-bottom: 18rpx;
}
.availableTitle{
	color: rgba(255, 255, 255,0.5);
	font-size: 28rpx;
	font-weight: 400;
	line-height: 20px;
	letter-spacing: 0px;
	text-align: center;
}
.inputTitle{
	
	color: rgb(255, 255, 255);
	font-size: 36rpx;
	height: 116rpx;
	line-height: 116rpx;
	font-weight: 400;
	letter-spacing: 0px;
	text-align: center;
	border-radius: 10px;
	width: 30%;
	background: linear-gradient(180.00deg, rgb(27, 88, 249) 19.847%,rgb(89, 133, 248) 82.443%);
}
::v-deep .u-input{
	background-color: rgba(33, 36, 55,0.7) !important;
} 
.custom-style{
	border-radius: 20rpx;
	margin-top: 40rpx;
	height:116rpx;
	font-size: 36rpx;
}
.inputTop{
	width: 100%;
	height: 60rpx;
	margin-bottom: 20rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.inputTop_left{
	width: 20%;
	display: flex;
	justify-content: space-between;
}
.inputTop_right{
	color: rgb(255, 75, 75);
	width: 40%;
	display: flex;
	font-size: 28rpx;
	justify-content: end;
	
}
</style>
